import { FC, useEffect, useRef } from 'react';
import { ProCard, ProForm, ProFormSelect } from '@ant-design/pro-components';
import { useRequest } from 'ahooks';
import { Pagination, Spin } from 'antd';
import StockItem from '@/components/stock-item';
import { RecognitionStrategy, RecognitionStrategyCN } from '@/constants/strategy';
import useContainer from '@/hooks/use-container';
import useQuerySearchParams from '@/hooks/use-query-search-params';
import { getSelectionList } from '@/service/apis/selection';

const Selection: FC = () => {
  const [params, setParams] = useQuerySearchParams();
  const [form] = ProForm.useForm();
  const containerRef: any = useRef<HTMLDivElement>();
  const scrollRef: any = useRef<HTMLDivElement>();

  const { height } = useContainer(containerRef);

  const { data: selections, loading }: any = useRequest(
    (pageNo: number) => {
      return getSelectionList({
        pageNo: +params?.pageNo || pageNo || 1,
        pageSize: +params?.pageSize || 10,
        strategy: params?.strategy,
      });
    },
    { refreshDeps: [params] },
  );

  useEffect(() => {
    if (params?.strategy) {
      form.setFieldsValue({ strategy: params?.strategy });
    }
  }, []);

  return (
    <div className="pl-4">
      <ProCard>
        <ProForm
          layout="inline"
          form={form}
          onFinish={(values) => {
            setParams({ ...params, ...values });
          }}
        >
          <ProFormSelect
            label="策略"
            name="strategy"
            width="md"
            options={[
              {
                value: RecognitionStrategy.LIMIT_UP_OF_TEN_DAYS,
                label: RecognitionStrategyCN[RecognitionStrategy.LIMIT_UP_OF_TEN_DAYS],
              },
              {
                value: RecognitionStrategy.RED_THREE_SOLDIERS,
                label: RecognitionStrategyCN[RecognitionStrategy.RED_THREE_SOLDIERS],
              },
              {
                value: RecognitionStrategy.MULTIPLE_VOLUME_AND_PRICE_UP,
                label: RecognitionStrategyCN[RecognitionStrategy.MULTIPLE_VOLUME_AND_PRICE_UP],
              },
            ]}
          />
        </ProForm>
      </ProCard>

      <div ref={containerRef} className="flex flex-col mt-4" style={{ height }}>
        <div className="flex-1 overflow-auto" ref={scrollRef}>
          {loading && (
            <div className="flex h-full justify-center items-center flex-col">
              <Spin size="large" />
              <div className="mt-5 text-xl font-medium">加载中...</div>
            </div>
          )}
          {!loading &&
            selections?.infos?.map((item: any) => {
              return <StockItem {...item} key={item?.code} />;
            })}
        </div>
        <Pagination
          className="mt-4"
          showQuickJumper
          total={selections?.total}
          current={params?.pageNo || 1}
          onChange={(current: number) => {
            scrollRef.current.scrollTop = 0;
            setParams({ ...params, pageNo: current });
          }}
        />
      </div>
    </div>
  );
};

export default Selection;
